<template>
  <wd-form custom-class="custom-form2" ref="form" :model="mode">
    <wd-cell title="艺名" title-width="150rpx">
      <wd-input
        type="text"
        v-model="mode.artName"
        prop="artName"
        :rules="[{ required: true, message: '请输入艺名' }]"
        placeholder="请输入艺名"
        suffix-icon="edit"
      />
    </wd-cell>
    <wd-cell title="头像" title-width="150rpx">
      <div class="right" @click="chooseAvatar()">
        <image class="avatar" :src="mode.avatar" mode="aspectFill" />
        <div class="icon i-carbon-chevron-right"></div>
      </div>
    </wd-cell>
    <wd-cell title="个人标签" title-width="150rpx">
      <wd-input
        type="text"
        v-model="mode.major"
        prop="major"
        :rules="[{ required: true, message: '请输入个人标签' }]"
        placeholder="请输入个人标签"
        suffix-icon="edit"
      />
    </wd-cell>
    <wd-cell title="性别" title-width="150rpx">
      <wd-picker
        :columns="classify"
        v-model="mode.sex"
        prop="sex"
        placeholder="请选择性别"
        :rules="[{ required: true, message: '请选择性别' }]"
      />
    </wd-cell>
    <!-- <wd-cell title="生日" title-width="150rpx">
      <wd-datetime-picker
        v-model="mode.startTime1"
        placeholder="请选择生日"
        prop="startTime1"
        :rules="[{ required: true, message: '请选择生日' }]"
      />
    </wd-cell> -->
    <wd-cell title="地区" title-width="150rpx">
      <wd-input
        type="text"
        v-model="mode.region"
        prop="region"
        :rules="[{ required: true, message: '请输入所在地区' }]"
        placeholder="请输入所在地区"
        suffix-icon="edit"
      />
    </wd-cell>
    <wd-cell custom-class="vertical-cell no-border" title="个人介绍" vertical title-width="150rpx">
      <wd-textarea
        type="text"
        v-model="mode.resume"
        prop="resume"
        :rules="[{ required: true, message: '请输入个人介绍' }]"
        placeholder="请输入个人介绍"
      />
    </wd-cell>
  </wd-form>
</template>
<script lang="ts" setup>
import { msgNone } from '@/utils/index'
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
})
defineOptions({ name: 'ApplyStep1' })

const classify = ref<any>([
  { label: '男', value: 1 },
  { label: '女', value: 2 },
])

const mode = reactive({
  artName: '',
  avatar: '',
  major: '',
  sex: '',
  region: '',
  resume: '',
})

watch(
  () => props.data,
  () => {
    Object.assign(mode, props.data)
  },
  {
    immediate: true,
    deep: true,
  },
)

// 修改头像
function chooseAvatar() {
  mode.avatar =
    'http://39.108.7.196:9000/homestay-hotels/upload/20240717/df995d0085494409b8d35a2f0b524b0c.png'
  // uni.chooseImage({
  //   count: 1, // 默认9
  //   sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
  //   success(res) {
  //     if (res.errMsg === 'chooseImage:ok') {
  //       uni.showLoading()
  //       http
  //         .uploadFile(res.tempFilePaths[0])
  //         .then((r: any) => {})
  //         .finally(() => {
  //           uni.hideLoading()
  //         })
  //     }
  //   },
  // })
}

const form = ref()
defineExpose({
  validate() {
    return new Promise((resolve, reject) => {
      form.value.validate().then(({ valid, errors }) => {
        if (valid) {
          if (mode.avatar) {
            resolve(mode)
          } else {
            msgNone('请选择头像')
          }
        } else {
          reject(errors)
        }
      })
    })
  },
  mode,
})
</script>
<style lang="scss" scoped>
.right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 27rpx;
  color: var(--color4);
  .avatar {
    width: 96rpx;
    height: 96rpx;
    background-color: var(--bgc1);
    border-radius: 48rpx;
  }
  .icon {
    margin-left: 16rpx;
    font-size: 30rpx;
    color: var(--color5);
  }
}
</style>
